<template>
  <div class="add-friend-comp">
    <!-- 搜索框 -->
    <div class="search pb-10">
      <n-input type="text" placeholder="搜索" v-model:value="keyword">
        <template #prefix>
          <n-icon size="20">
            <SearchOutline></SearchOutline>
          </n-icon>
        </template>
      </n-input>
    </div>

    <!-- 正在加载 -->
    <div class="loading" v-if="loading1">
      <div class="flex flex-cc p-10" v-for="(v, i) in 2" :key="i">
        <div class="sk-circle">
          <n-skeleton circle></n-skeleton>
        </div>

        <div class="flex-1">
          <div class="sk-round mb-10">
            <n-skeleton round></n-skeleton>
          </div>

          <div class="sk-round">
            <n-skeleton round></n-skeleton>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="result" v-else>
      <ul v-if="result?.account">
        <li class="friend flex flex-cc">
          <div class="mr-10">
            <BaseImage
              class="kang-avatar large"
              :src="result.headPic"
            ></BaseImage>
          </div>

          <div class="flex-1">
            <div class="fz-16 mb-5">
              {{ result.friendAlias || result.userName }}
            </div>
            <div class="fz-12 cl-blue">{{ result.account }}</div>
          </div>

          <div class="flex flex-center">
            <n-button type="primary" round @click="sendAddUserMsg">
              添加
            </n-button>
          </div>
        </li>
      </ul>

      <n-empty class="mt-30" description="暂无数据" v-else></n-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { SearchOutline } from '@vicons/ionicons5'
import api from '@/kang/js/api'

const keyword = ref('')
const result = ref()
const loading1 = ref(false)
const loading2 = ref(false)
const timer = ref(null)

watch(
  () => keyword.value,
  () => {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      searchUser()
      clearTimeout(timer.value)
    }, 300)
  },
  {
    immediate: true,
  }
)

// 搜索用户
async function searchUser() {
  if (!keyword.value.trim()) {
    result.value = {}
    loading1.value = false
    clearTimeout(timer.value)
    return
  }

  try {
    const params = {
      account: keyword.value.trim(),
    }

    loading1.value = true
    const { code, data } = await api.searchUser(params)
    loading1.value = false

    if (code === 200) {
      result.value = data
    }
  } catch (err) {
    loading1.value = false
  }
}

// 添加用户为好友
async function sendAddUserMsg() {
  try {
    const params = {
      account: result?.value?.account,
    }

    loading2.value = true
    const { code } = await api.sendAddUserMsg(params)
    loading2.value = false

    if (code === 200) {
      $message.success('申请成功')
    }
  } catch (err) {
    loading2.value = false
  }
}
</script>

<style lang="scss" scoped>
.add-friend-comp {
  height: 400px;

  .loading {
    .sk-circle {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }

    .sk-round {
      width: 100%;
      height: 25px;
      margin-right: 10px;
    }

    :deep(.n-skeleton) {
      width: 100%;
      height: 100%;
    }
  }

  .search {
    border-bottom: 5px solid var(--color-bg);

    :deep(.n-input) {
      background-color: var(--color-bg);
      border-radius: 10px;

      .n-input__border {
        display: none;
      }
    }
  }

  .result {
    .friend {
      padding: 15px;
    }
  }
}
</style>
